<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <!-- 引入样式 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>题库</title>
    <div id="app">
        <h2>{{ message }}</h2>
    </div>
    <!-- 头部工具栏-->
    <div id="tableView">
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <!-- <el-form-item label="题目编号">
                <el-input v-model="searchForm.id" placeholder="题目编号"></el-input>
            </el-form-item> -->
            <el-form-item label="题目">
                <el-input v-model="searchForm.question" placeholder="题目"></el-input>
            </el-form-item>
            <el-form-item label="年度">
                <el-select v-model="searchForm.year" placeholder="年度">
                    <el-option
                            v-for="item in years"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchClick">查询</el-button>
                <el-button type="success" icon="el-icon-plus" @click="addClick">新增</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <!-- 头部工具栏 End-->
        <!--动态表格-->
        <el-row>
            <el-table
                    :data="tableData"
                    v-loading.body="loading"
                    border
                    @selection-change="selectionChange"
                    style="width: 100%">
                 <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        type="index"
                        label="编号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="question"
                        label="题目"
                        width="500">
                </el-table-column>
                <el-table-column
                        prop="yname"
                        label="年度"
                        width="120">
                </el-table-column>
             <el-table-column
                        label="操作">
                    <template scope="scope">
                        <el-button :plain="true" type="warning"  icon="el-icon-edit" @click="editClick(scope.row)">编辑</el-button>
                        <el-button :plain="true" type="danger"  icon="el-icon-delete" @click="deleteClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!--动态表格 End-->
        <!-- 编辑表单 -->
        <el-dialog title="编辑题目" :visible.sync="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="题目" prop="question">
                    <el-input v-model="editForm.question" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="选项A" prop="optiona">
                    <el-input v-model="editForm.optiona" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="选项B" prop="optionb">
                    <el-input v-model="editForm.optionb" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="选项C" prop="optionc">
                    <el-input v-model="editForm.optionc" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="答案" prop="answer">
                    <el-select v-model="editForm.answer" placeholder="答案">
                        <el-option label="A" value="A"></el-option>
                        <el-option label="B" value="B"></el-option>
                        <el-option label="C" value="C"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型" prop="questiontypeid">
                    <el-select v-model="editForm.questiontypeid" placeholder="请选择">
                        <el-option
                                v-for="item in types"
                                :key="item.id"
                                :label="item.typename"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年度" prop="year">
                    <el-select v-model="editForm.year" placeholder="年度">

                        <el-option
                                v-for="item in years"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false" @click="resetForm('editForm')">取消</el-button>
                <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
        <!-- 编辑页面 End -->
        <!--列表底部工具条和分页符-->
        <el-row style="margin-top: 20px" type="flex" justify="end">
             <el-col :span="6" >
                <el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelection">删除所选</el-button>
            </el-col>
            <el-col :span="18" >
                <el-pagination
                        style="float: right"
                        @size-change="pageSizeChange"
                        @current-change="currentPageChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-col>
        </el-row>

        <!--列表底部工具条和分页符  End-->
    </div>
        </head>
<body>
    <script type="text/javascript">
        var vm=new Vue({
            el:"#app",
            data:{
                message:"题库列表",
            }
        });
        var Body=new Vue({
            el:"#tableView",
            data: {
                goUrl:'',
                //加载表格
                tableData:[],
                //显示加载中样式
                loading:false,
                //多选值
                multipleSelection: [],
                //当前页
                currentPage:1,
                //分页大小
                pageSize:5,
                //总记录数
                total:1000,
            searchForm:{
                question:'',
                year:'',
            }, //表单隐藏
            editFormVisible: false,
                editLoading: false,
                //表单验证
                editFormRules: {
                    question:[
                        { required: true, message: '请输入题目', trigger: 'blur' }
                    ],
                    optiona:[
                        { required: true, message: '请输入选项A', trigger: 'blur' }
                    ],
                    optionb:[
                        { required: true, message: '请输入选项B', trigger: 'blur' }
                    ],
                    optionc:[
                        { required: true, message: '请输入选项C', trigger: 'blur' }
                    ],
                    answer:[
                        { required: true, message: '请选择答案', trigger: 'blur' }
                    ],
                    questiontypeid:[
                        { required: true, message: '请选择类型', trigger: 'blur' }
                    ],
                    year:[
                        { required: true, message: '请选择年份', trigger: 'blur' }
                    ]
                },
            editForm:{
                question:'',
                optiona:'',
                optionb:'',
                optionc:'',
                answer:'',
                questiontypeid:'',
                year:''
            },
                types:[],
                years:[],
            },
            // 运行即加载
           created:function(){
                var self=this;
               var start =(this.currentPage-1)*this.pageSize;
               var end =this.pageSize;
               axios.post('/question/list',{'start':start,'pageSize':this.pageSize}).then(function(response){
                   // console.log(response.data);
                   //alert(response.data.total);
                   self.total=response.data.total;
                   self.tableData = response.data.data;
                   self.types = response.data.types;
                   self.years=response.data.years;
                   // self.multipleSelection=response.data.data;
               })
           },
            methods: {
                /*重新加载数据方法*/
                loadingData:function(){
                    var _self = this;
                    _self.loading = true;
                    var start =(this.currentPage-1)*this.pageSize;
                    var end =this.pageSize;
                    var searchForm={'start':start,'pageSize':this.pageSize,'question':this.searchForm.question,'year':this.searchForm.year/* 'name':this.searchForm.name,'projectname':this.searchForm.projectname */};
                    axios.post('/question/list',searchForm).then(function(response){
                        console.log(response.data);
                        //alert(response.data);
                        _self.total=response.data.total;
                        //alert(JSON.stringify(response.data.options));
                        _self.tableData = response.data.data;
                        _self.types = response.data.types;
                        _self.years = response.data.years;
                        //_self.multipleSelection=response.data.data;
                    })
                    setTimeout(function(){
                        console.info("加载数据成功");
                        _self.loading = false;
                    },300);
                },
                //搜索事件
                searchClick: function () {
                    var self = this;
                    self.loadingData();//重新加载数据
                },
                //搜索事件 end
                //新增事件
                addClick: function () {
                    this.editForm = {
                        question: '',
                        optiona: '',
                        optionb: '',
                        optionc: '',
                        answer: '',
                        questiontypeid:'',
                        year:'',
                    };
                    this.goUrl = "/question/insert";
                    var _self = this;
                    this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                    _self.loadingData();//重新加载数据
                },
                //新增事件
                //取消事件
                //取消事件
                resetForm:function(editForm) {
                    this.$refs[editForm].resetFields();
                },
                //end
                /* 行级删除*/
                deleteClick:function(row){
                    var _self=this;
                    this.$confirm("确定删除吗",{
                        type:'warning'
                    }).then(function () {
                        var  url="/question/del/"+row.id;
                        axios.get(url).then(function (response) {
                                if (response.data>0){
                                    _self.$message({
                                        message:'删除成功',
                                        type: 'success'
                                    });
                                    _self.loadingData();//重新加载数据
                                }
                        })
                    })
                },
                /* 行级删除  End*/
                //修改事件
                    editClick:function(row){
                        this.goUrl="/question/update";
                        this.editFormVisible = true;
                        this.editForm = Object.assign({},row);
                    },
                //修改事件  end
                //批量删除
                removeSelection:function() {
                    var _self = this;
                    var multipleSelection = this.multipleSelection;
                    if(multipleSelection.length < 1) {
                        _self.$message({
                            message: '请至少选中一条记录',
                            type: 'error'
                        });
                        return;
                    }
                    var ids = '';
                    for(var i=0;i<multipleSelection.length;i++) {
                        var row = multipleSelection[i];
                        ids
                            += row.id + ","

                    }
                    this.$confirm('确认删除' + ids +'吗?', '提示', {
                        type: 'warning'
                    }).then(function(){
                        var  url="/question/dels/"+ids;
                        axios.get(url).then(function (response) {
                            //alert(response.data);
                            var temp="";
                            if(response.data>0){
                                temp="删除成功";
                            }else {
                                temp="删除失败";
                            }
                            _self.$message({
                                message: ids + temp,
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        });
                    }).catch(function(e){
                        if(e != "cancel")
                            console.log("出现错误：" + e);
                    });
                },
                //分页大小修改事件
                pageSizeChange:function(val) {
                    console.log('每页 ' + val +' 条');
                    this.pageSize = val;
                    var _self = this;
                    _self.loadingData();//重新加载数据
                },
                //当前页修改事件
                currentPageChange:function(val) {
                    this.currentPage = val;
                    console.log('当前页: ' + val);
                    var _self = this;
                    _self.loadingData();//重新加载数据
                },
                //表格勾选事件
                selectionChange:function(val) {
                    for(var i=0;i<val.length;i++) {
                        var row = val[i];
                    }
                    this.multipleSelection = val;
                    console.info(val);
                },
                // 提交事件
                editSubmit:function(editForm){
                    //this.$refs[editForm].validate(function(valid){
                    this.$refs[editForm].validate((valid) => {
                        if (valid) {
                            // alert('submit!');
                            var _self = this;
                            _self.loading = true;
                            var formData =this.editForm;
                            //alert(formData);
                            var goUrl=this.goUrl;
                            //alert(goUrl);
                            //alert(JSON.stringify(formData));
                            axios.post(goUrl,formData).then(function(response){
                                // console.log(response.data);
                                // self.total=response.data.total;
                                if(response.data>0){
                                    _self.editFormVisible = false;// 让弹出层隐藏
                                    _self.loadingData();//重新加载数据
                                }
                            })
                            console.info(this.editForm);
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                getTime(date){
                    this.time = date;
                    console.log(this.time);
                }
            }
        })
    </script>
</body>
</html>